<template>
  <div>
    <el-drawer
      v-model="drawer"
      :title="title"
      direction="btt"
      :before-close="handleClose"
      size="60%"
      :show-close="false"
    >
      <div class="px-20px pt-10px">
        <div class="flex justify-between items-center">
          <div class="flex flex-col items-center text-14px font-black">
            <span class="mb-3px"> 宏骥（浙江）科技有限公司 </span>
            <span class="mb-3px">宏骥（广东）科技有限公司</span>
            <span class="mb-3px">系 RCEP CO., LTD.控股机构</span>
          </div>
          <!-- <div
            class="w-90px h-40px text-20px font-bold bg-[#111] text-white flex flex-center rounded-20px"
          >
            登录
          </div> -->
        </div>
        <div class="flex flex-center mt-20px">
          <span class="text-28px font-bold">欢迎莅临RCEP</span>
        </div>
      </div>
      <template #footer>
        <div class="flex flex-col items-center">
          <div class="mb-10px">如果您选择“全部拒绝”，将无法使用本站的服务</div>
          <div class="grid grid-cols-2 gap-20px">
            <div class="flex justify-center w-full">
              <div
                class="min-w-90px h-40px text-20px font-bold bg-[#111] text-white flex flex-center rounded-20px px-20px"
                @click="acceptMe"
              >
                全部同意
              </div>
            </div>
            <div class="flex justify-center w-full">
              <div
                class="min-w-90px h-40px text-20px font-bold bg-[#111] text-white flex flex-center rounded-20px px-20px"
                @click="refuseMe"
              >
                全部拒绝
              </div>
            </div>
          </div>
          <div class="flex mb-10px items-center mt-10px">
            <a href="javascript:;" class="text-blue" @click="showYSZCBox('隐私政策', 'yszc')">
              隐私政策
            </a>
            <span class="mx-10px text-blue">·</span>
            <a href="javascript:;" class="text-blue" @click="showYSZCBox('服务条款', 'fwtk')">
              服务条款
            </a>
          </div>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showYSZCBox } from '@/utils/showApi'
import { setCookie } from '@/utils/cookie'
import router from '@/router'

const drawer = ref(false)
const title = ref(null)
const myCallback = ref()

const init = (data, callback) => {
  drawer.value = true
  if (data?.title) title.value = data.title
  if (callback) myCallback.value = callback
}

const acceptMe = () => {
  setCookie('sytk', '1', import.meta.env.VITE_DOMAIN_URL, false)
  drawer.value = false
}

const refuseMe = () => {
  router.push('/')
  drawer.value = false
}

defineExpose({
  init,
})
</script>

<style lang="scss" scoped>
:deep .el-drawer__body {
  padding: 0;
}
:deep .el-drawer__header {
  margin-bottom: 0;
}
</style>
